<template>
  <div>
    <el-card shadow="always">
      <template v-if="form.id">
        <h3>食堂基本信息</h3>
        <div class="right">
          <el-button type="primary" @click="dialogVisible = true"
            >修改</el-button
          >
        </div>

        <el-form ref="form" :model="form" label-width="280px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="供餐方式">
                <div v-if="form.serveFoodWay == '1'">自办食堂</div>
                <div v-else-if="form.serveFoodWay == '2'">送餐</div>
              </el-form-item></el-col
            >
            <el-col :span="12">
              <el-form-item label="经营方式">
                <div v-if="form.operateWay == '1'">自营</div>
                <div v-else-if="form.operateWay == '2'">承包或委托经营</div>
              </el-form-item></el-col
            >
            
          </el-row>
    <el-row>
   <el-col :span="12">
              <el-form-item label="纳入食材追溯系统" prop="reviewSystem">
                <!-- {{ form.reviewSystem }} -->
                        <div v-if="form.reviewSystem == '1'">是</div>
                <div v-else-if="form.reviewSystem == '0'">否</div>
                </el-form-item
              ></el-col>
 <el-col :span="12">
              <el-form-item
                label="是否建立HACCP或ISO22000管理体系"
              >
                <div v-if="form.system == '1'">是</div>
                <div v-else-if="form.system == '0'">否</div>
              </el-form-item>
            </el-col>

    </el-row>
          <el-row>
           
            <el-col :span="12">
              <el-form-item label="就餐人数">
                {{ form.dining }}
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item
                label="是否实施五常、6T等食品安全管理"
              >
                <div v-if="form.effectWuChang == '1'">是</div>
                <div v-else-if="form.effectWuChang == '0'">否</div>
              </el-form-item>
            </el-col>

       
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="明厨亮灶">
                <!-- {{ form.brightStove }} -->
                        <div v-if="form.brightStove == '1'">是</div>
                <div v-else-if="form.brightStove == '0'">否</div>
              </el-form-item></el-col
            >

            <el-col :span="12">
              <el-form-item label="互联网+明厨亮灶">
                <!-- {{ form.internetBrightStove }} -->
                        <div v-if="form.internetBrightStove == '1'">是</div>
                <div v-else-if="form.internetBrightStove == '0'">否</div>
              </el-form-item>
            </el-col>

         
          </el-row>



     <el-row>
     <el-col :span="12">
              <el-form-item label="食堂分类">
                {{ form.canteenStatistics }}
              </el-form-item>
            </el-col>



 <el-col :span="12">
            <el-form-item label="公开招标、集中定点采购" >
         
                        <div v-if="form.inviteTenders == '1'">是</div>
                <div v-else-if="form.inviteTenders == '0'">否</div>
         </el-form-item
          ></el-col>





     </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="学校主管部门"
                prop="schoolDepartment"
              >
                {{ form.schoolDepartment }}
              </el-form-item>
            </el-col>
          </el-row>
          <template v-if="form.serveFoodWay == 2">
            <div>
              <h3>校外供餐配送单位</h3>
              <rz-height />
              <el-table :data="tableData1" border style="width: 100%">
                <el-table-column
                  prop="unitName"
                  label="主体名称"
                ></el-table-column>
                <el-table-column
                  prop="identify"
                  label="统一社会信用代码"
                ></el-table-column>
                <el-table-column
                  prop="newLicenseNo"
                  label="食品经营许可证"
                ></el-table-column>
              </el-table>
            </div>
          </template>
          <template v-if="form.operateWay == 2">
            <div>
              <h3>承包商</h3>
              <rz-height />
              <el-table :data="tableData2" border style="width: 100%">
                <el-table-column
                  prop="unitName"
                  label="主体名称"
                ></el-table-column>
                <el-table-column
                  prop="identify"
                  label="统一社会信用代码"
                ></el-table-column>
                <el-table-column
                  prop="newLicenseNo"
                  label="食品经营许可证"
                ></el-table-column>
              
              </el-table>
            </div>
          </template>
        </el-form>
      </template>

      <div v-else class="center">该单位暂未上传食堂相关信息</div>

      <rz-dialog
        :dialogVisible.sync="dialogVisible"
        title="修改食堂信息"
        width="60%"
          confirmName="保存"
        @onconfirm="onconfirm"
      >
        <el-form
          ref="form1"
          :model="modifyForm"
          label-width="280px"
        >
       



      




   <el-row>
          <el-col :span="12">
            <el-form-item label="食堂分类" >
              <el-select v-model="modifyForm.canteenStatistics" placeholder="请选择食堂分类">
                <el-option
                  v-for="item in [
                    {
                      label: '幼托机构（幼儿园，不包括3岁以下托育机构）',
                      value: '幼托机构（幼儿园，不包括3岁以下托育机构）',
                    },
                       {
                      label: '初等教育学校（小学）',
                      value: '初等教育学校（小学）',
                    },
                       {
                      label: '中等教育学校（初中和高中）',
                      value: '中等教育学校（初中和高中）',
                    },
                       {
                      label: '中等职业教育学校（中专院校、职业高中等）',
                      value: '中等职业教育学校（中专院校、职业高中等）',
                    },
                       {
                      label: '高等教育学校（大专及以上学校）',
                      value: '高等教育学校（大专及以上学校）',
                    },
                  ]"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="明厨亮灶" >
              <el-select v-model="modifyForm.brightStove" placeholder="请选择明厨亮灶">
                <el-option
                  v-for="item in [
                    {
                      label: '是',
                      value: 1,
                    },
                    {
                      label: '否',
                      value: 0,
                    },
                  ]"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>

   </el-row>
<el-row>
          <el-col :span="12">
            <el-form-item label="互联网+明厨亮灶" >
              <el-select v-model="modifyForm.internetBrightStove" placeholder="请选择互联网+明厨亮灶">
                <el-option
                  v-for="item in [
                     {
                      label: '是',
                      value: 1,
                    },
                    {
                      label: '否',
                      value: 0,
                    },
                  ]"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
 <el-col :span="12">
            <el-form-item label="公开招标、集中定点采购" >
              <el-select v-model="modifyForm.inviteTenders" placeholder="请选择公开招标、集中定点采购">
                <el-option
                  v-for="item in [
                    {
                      label: '是',
                      value: 1,
                    },
                    {
                      label: '否',
                      value: 0,
                    },
                  ]"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>

        </el-row>















        <el-row>
         
 <el-col :span="12">
            <el-form-item label="纳入食材追溯系统" >
              <el-select v-model="modifyForm.reviewSystem" placeholder="请选择纳入食材追溯系统">
                <el-option
                  v-for="item in [
                    {
                      label: '是',
                      value: 1,
                    },
                    {
                      label: '否',
                      value: 0,
                    },
                  ]"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="是否建立HACCP或ISO22000管理体系"
              label-width="280px"
            >
              <el-radio-group v-model="modifyForm.system">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

      
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="供餐方式">
              <el-select
                v-model="modifyForm.serveFoodWay"
                placeholder="请选择供餐方式"
              >
                <el-option
                  v-for="item in [
                    {
                      label: '自办食堂',
                      value: 1,
                    },
                    {
                      label: '送餐',
                      value: 2,
                    },
                  ]"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="经营方式"
            >
                 <el-select
                v-model="modifyForm.operateWay"
                placeholder="请选择经营方式"
              >
                <el-option
                  v-for="item in [
                    {
                      label: '自营',
                      value: 1,
                    },
                    {
                      label: '承包或委托经营',
                      value: 2,
                    },
                  ]"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
             <el-col :span="12">
            <el-form-item
              label="是否实施五常、6T等食品安全管理"
              label-width="280px"
            >
              <el-radio-group v-model="modifyForm.effectWuChang">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
      <el-col :span="12">
            <el-form-item
              label="供餐人数"
            >
          
              <el-input v-model="modifyForm.dining"   v-number placeholder="请输入供餐人数"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
  <el-row>
          <el-col :span="24">
            <el-form-item
              label="学校主管部门"
            >
              <el-input v-model="modifyForm.schoolDepartment"   type="textarea"   placeholder="请输入学校主管部门"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
      </rz-dialog>
    </el-card>
  </div>
</template>
<script>
//
import { findCanteenManage,saveCanteenManage } from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
    this.getId();
  },

  // 页面加载完成
  mounted() {
    //  this.$refs.form.validate((valid) => {
    //       if (valid) {
    //         alert('submit!');
    //       } else {
    //         console.log('error submit!!');
    //         return false;
    //       }
    //     });
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      form: {
        dining: "",
        effectWuChang: 1,
        operateWay: "",
        serveFoodWay: "",
        system: 1,
        unitId: this.$unitId,
        unitName: "",
        schoolDepartment: "",
        id: "",
        canteenStatistics: "",
        brightStove: "",
        internetBrightStove: "",
        reviewSystem: "",
        inviteTenders: "",
      },
      tableData1: [],
      tableData2: [],
      dialogVisible: false,
      modifyForm: {
        id:"",
        canteenStatistics: "",
        brightStove: "",
        internetBrightStove: "",
        reviewSystem: "",
        inviteTenders: "",
        effectWuChang:"",
         system: "",
          schoolDepartment:"",
        serveFoodWay:"",
        operateWay:"",
        dining:"",
      },
    };
  },
  // 方法
  methods: {
   async onconfirm() {
  if(this.modifyForm.schoolDepartment=='')return this.$error('请输入学校主管部门')
  if(this.modifyForm.serveFoodWay=='')return this.$error('请选择供餐方式')
  if(this.modifyForm.operateWay=='')return this.$error('请选择经营方式')
  if(this.modifyForm.dining=='')return this.$error('请输入供餐人数')
      let res = await saveCanteenManage(this.modifyForm);
          this.$success(res.msg);
          this.dialogVisible=false
           this.getId()  
    },
    async getId() {
      let res = await findCanteenManage({
        params: {
          unitId: sessionStorage.getItem("interpretation"),
        },
      });
      this.form.dining = res.data.dining;
      this.form.effectWuChang = res.data.effectWuChang;
      this.form.operateWay = res.data.operateWay;
      this.form.serveFoodWay = res.data.serveFoodWay;
      this.form.system = res.data.system;
      this.form.id = res.data.id;
      this.form.unitName = res.data.unitName;
      this.form.schoolDepartment = res.data.schoolDepartment;
      this.form.canteenStatistics = res.data.canteenStatistics;
      this.form.brightStove = res.data.brightStove;
      this.form.internetBrightStove = res.data.internetBrightStove;
      this.form.reviewSystem = res.data.reviewSystem;
      this.form.inviteTenders = res.data.inviteTenders;
      this.tableData1 = res.data.findManageUnitResponseList.filter(
        (x) => x.category == 1);
      this.tableData2 = res.data.findManageUnitResponseList.filter(
        (x) => x.category == 2
      );
                 let data = this.$_.cloneDeep(res.data)
      this.modifyForm.canteenStatistics =data.canteenStatistics;
      this.modifyForm.id =data.id;
      this.modifyForm.brightStove = data.brightStove;
      this.modifyForm.internetBrightStove = data.internetBrightStove;
      this.modifyForm.reviewSystem = data.reviewSystem;
      this.modifyForm.inviteTenders = data.inviteTenders;
      this.modifyForm.effectWuChang = data.effectWuChang;
      this.modifyForm.system = data.system;

    this.modifyForm.schoolDepartment = data.schoolDepartment;
      this.modifyForm.serveFoodWay = data.serveFoodWay;
      this.modifyForm.operateWay = data.operateWay;
      this.modifyForm.dining = data.dining;



    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
</style>